<template>
  <el-card class="searchBox">
    <el-form :inline="true">
      <el-form-item label="学年">
        <el-select v-model="queryParams.schoolYear" placeholder="选择学年搜索" clearable>
          <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学期">
        <el-select v-model="queryParams.stage" placeholder="选择学期搜索" clearable>
          <el-option label="第一学期" :value="1" />
          <el-option label="第二学期" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <section>
          <el-button type="primary" icon="Search" @click.stop="getData">搜 索</el-button>
          <el-button type="warning" icon="RefreshRight" @click.stop="reset">重 置</el-button>
        </section>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useAPI } from '../../../../request/api';
import { useUserStore } from '../../../../store/user';
import { APIData, IScoreAnalyseByStuParams } from '../../../../type/index';
import { ElMessage } from 'element-plus';
import { useUtils } from '../../../../utils/index';

const api = useAPI();
const utils = useUtils();
const userStore = useUserStore();
const emit = defineEmits(['onReload']);
const schoolYearList = ref([] as { label: string; value: string }[]);
const queryParams = ref<IScoreAnalyseByStuParams>({
  schoolYear: '',
  stage: '',
  studentId: userStore.userInfo.studentId
})

onMounted(() => {
  schoolYearList.value = utils.getStuSchoolYear(Number(userStore.userInfo.grade));
  getData();
})

const reset = () => {
  queryParams.value = {
    schoolYear: '',
    stage: '',
    studentId: userStore.userInfo.studentId
  }
  getData();
}

const getData = async () => {
  const res: APIData = await api.score.findScoreAnalyseByStu(queryParams.value);
  if (res.code === 200 && res.data.perScoreList) emit('onReload', res.data);
  else {
    ElMessage.success(res.message);
    emit('onReload', res.data);
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
  padding-bottom: 0;
}

.searchBox {
  &-item {
    margin-right: 10px;
  }

  :deep(.el-card__body) {
    display: flex;
    justify-content: space-between;
  }

  section {
    display: flex;
  }

  :deep(.el-input__wrapper) {
    width: 200px;
  }
}
</style>
